<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="msapplication-TileColor" content="#2d89ef">
    <meta name="theme-color" content="#4188c9">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <title>收藏</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
    <link href="/static/assets/css/dashboard.css" rel="stylesheet"/>
</head>
<body class="">
<div class="page">
    <div class="flex-fill">
        <!--响应式顶部菜单-->
        <div th:replace="public/topbar :: flexTopbar(2)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row mb-3">
                    <div class="col-3 dropdown d-xl-inline-block d-none">
                        <div class="card card-profile">
                            <div class="card-header"><h2>Welcome</h2></div>
                            <div class="card-body text-center">
                                <div class="list-group list-group-transparent mb-0">
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/view}">
                                        <i class="fe fe-eye"></i>&nbsp;&nbsp;&nbsp;我看过的
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/like}">
                                        <i class="fe fe-thumbs-up"></i>&nbsp;&nbsp;&nbsp;我赞过的
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center active" th:href="@{/collect}">
                                        <i class="fe fe-star"></i>&nbsp;&nbsp;&nbsp;我收藏的
                                    </a>
                                    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center" th:href="@{/subscribe}">
                                        <i class="fe fe-thumbs-up"></i>&nbsp;&nbsp;&nbsp;我订阅的
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9">
                        <!--顶部菜单-->
                        <div th:replace="public/topbar :: topbar(2)"></div>
                        <div class="card">
                            <div class="empty" th:if="${collectList} == null">
                                <p class="empty-title h3">暂无收藏记录</p>
                                <div class="empty-action">
                                    <a href="../index.html" class="btn btn-primary">
                                        返回首页
                                    </a>
                                </div>
                            </div>
                            <div class="card-body d-flex flex-column" th:if="${collectList} != null">
                                <div id="echarts" style="width: 100%;height: 300px;"></div>
                                <p class="card-columns" th:each="article : ${collectList.articleList}">
                                    <a href="../article/item.html" th:href="@{'/item/' + ${article.id}}" th:text="${article.title}">Spring Cloud --- 服务注册</a>
                                </p>
                                <span id="tagData" th:text="${collectList.tagJson}" style="display: none;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:replace="public/footer :: footer"></div>
</div>
</body>
<script src="/static/assets/js/require.min.js"></script>
<script src="/static/assets/js/dashboard.js"></script>
<script>
    requirejs.config({
        baseUrl: '/static',
        paths: {
            jquery: "/static/assets/editor/js/jquery.min",
            echarts: "/static/assets/js/echarts"
        }
    });
    require(["echarts"], function(echarts) {
        let data = document.getElementById("tagData").innerText;
        var myChart = echarts.init(document.getElementById('echarts'));
        option = {
            title: {
                text: '',
                left: 'center',
                top: '49%',
                textStyle: {
                    fontSize: 16,
                    color: '#3C4353',
                    fontStyle: 'normal',
                    fontWeight: '400',
                    fontFamily: 'PingFangSC-Regular,PingFang SC;',
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
            },
            series: [{
                name: '',
                type: 'pie',
                radius: [30, 110],
                center: ['50%', '50%'],
                roseType: 'radius',
                label: {
                    show: true,
                    formatter:  '{b}'
                },
                emphasis: {
                    label: {
                        show: true
                    }
                },
                data: JSON.parse(data)
            }, {
                name: '占位',
                type: 'pie',
                silent: true,
                center: ['50%', '50%'],
                radius: 30,
                hoverAnimation: false,
                label: {
                    show: false,
                    position: 'center'
                },
                data: [{
                    value: 1,
                    name: '占位2'
                },

                ],
                itemStyle: {
                    normal: {
                        color: '#fff',
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 10,
                    },
                }
            }, ]
        };
        myChart.setOption(option);
    });
</script>

</html>
